<template>
  <div class="contract-detail-container" v-loading="loading">
    <!-- 上方展示信息区域 -->
    <div class="header-info">
      <div class="info-left">
        <!-- 合同名称区域 -->
        <div class="contract-name-container">
          <span class="contract-name-title">合同名称：</span>
          <span class="contract-name-value">{{ contractInfo.contractName }}</span>
        </div>
        <!-- 其他信息区域 -->
        <div class="additional-info">
          <span class="contract-no">合同编号：{{ contractInfo.contractNo }}</span>
          <span class="requirement-no">关联需求编号：{{ contractInfo.deId }}</span>
          <span class="requirement-name"
            >关联需求：
            <el-button link type="primary" @click="towardRequirement">{{
              contractInfo.dname
            }}</el-button>
          </span>
          <span class="status"
            >当前状态：<span class="status-text">{{ contractInfo.statusText }}</span></span
          >
        </div>
        <div class="additional-info">
          <span class="customer-name">客户名称：{{ contractInfo.customerName }}</span>
          <span class="contract-amount">合同金额：{{ contractInfo.contractAmount }}</span>
          <span class="sales-person">销售人员：{{ contractInfo.salesPerson }}</span>
          <span class="delivery-address">交付地址：{{ contractInfo.deliveryAddress }}</span>
        </div>
        <div class="additional-info">
          <span class="delivery-date">交付日期：{{ contractInfo.deliveryDate }}</span>
          <span class="acceptance-date">验收日期：{{ contractInfo.acceptanceDate }}</span>
          <span class="signing-date">签订日期：{{ contractInfo.signingDate }}</span>
          <span class="delivery-date">交付日期：{{ contractInfo.deliveryDate }}</span>
        </div>
        <div class="additional-info">
          <span class="contact-person">客户联系人：{{ contractInfo.contactPerson }}</span>
          <span class="contact-phone">客户联系电话：{{ contractInfo.contactPhone }}</span>
          <span class="attachment"
            >附件：
            <el-button link type="primary" @click="showAttachment">{{
              contractInfo.attachment
            }}</el-button>
          </span>
          <span class="approval-status"
            >审批状态：
            <el-button link type="primary" @click="showApprovalStatus">{{
              contractInfo.approvalStatus
            }}</el-button>
          </span>
        </div>
        <div class="additional-info">
          <span class="remark-title">备注：</span>
          <span class="remark-content">{{ contractInfo.remark }}</span>
        </div>
      </div>
      <div class="info-right">
        <el-button @click="handleBack" plain>返回</el-button>
      </div>
    </div>

    <!-- 选项卡部分 -->
    <div class="tabs-container">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="合同信息" name="contract">
          <!-- 下方左右布局区域 - 只在合同信息页签中显示 -->
          <div class="main-content-container">
            <!-- 左侧选项卡 -->
            <div class="left-sidebar">
              <h3 class="config-title">需求参数</h3>
              <div class="tab-container">
                <div
                  class="tab-item"
                  :class="{ active: activeConfig === 'technical' }"
                  @click="activeConfig = 'technical'"
                >
                  <span class="dot"></span>
                  <span class="tab-text">技术参数</span>
                </div>
                <div
                  class="tab-item"
                  :class="{ active: activeConfig === 'business' }"
                  @click="activeConfig = 'business'"
                >
                  <span class="dot"></span>
                  <span class="tab-text">业务参数</span>
                </div>
              </div>
            </div>

            <!-- 中间分割线 -->
            <div class="divider"></div>

            <!-- 右侧内容区域 -->
            <div class="right-content">
              <!-- 右侧标题 -->
              <div class="right-header">
                <h3 class="content-title">
                  {{ activeConfig === 'technical' ? '技术参数' : '业务参数' }}
                </h3>
              </div>

              <!-- 右侧内容 -->
              <div class="content-area">
                <!-- 技术参数内容区 -->
                <div v-if="activeConfig === 'technical'" class="technical-content">
                  <div class="technical-grid">
                    <el-table :data="technicalParamsList" style="width: 100%" border>
                      <el-table-column prop="field1" label="配置的字段" align="left" />
                      <el-table-column prop="field2" label="配置的字段" align="left" />
                      <el-table-column prop="field3" label="配置的字段" align="left" />
                      <el-table-column prop="unitPrice" label="单价" align="left" />
                      <el-table-column prop="quantity" label="数量" align="left" />
                      <el-table-column prop="amount" label="金额" align="left" />
                      <el-table-column prop="field4" label="配置的字段" align="left" />
                    </el-table>
                    <!-- 分页组件 -->
                    <el-pagination
                      style="margin-top: 20px; justify-content: flex-end"
                      v-model:current-page="query.pageNum"
                      v-model:page-size="query.pageSize"
                      :page-sizes="[10, 20, 30, 50]"
                      :total="technicalParamsList.length"
                      layout="total, sizes, prev, pager, next, jumper"
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                    />
                  </div>
                </div>

                <!-- 业务参数内容区 -->
                <div v-else-if="activeConfig === 'business'" class="business-content">
                  <div class="business-item">
                    <div class="business-label">紧急程度：</div>
                    <div class="business-value">一般</div>
                  </div>
                  <div class="business-item">
                    <div class="business-label">交付日期：</div>
                    <div class="business-value">2025-04-20</div>
                  </div>
                  <div class="business-item">
                    <div class="business-label">客户要求：</div>
                    <div class="business-value customer-requirements">
                      客户对部门的要求客户对部门的要求客户对部门的要求客户对部门的要求客户对部门的要求客户对部门的要求客户对部门的要求客户对部门的要求客户对部门的要求客户对部门的要求客户对部门的要求客户对部门的要求客户对部门的要求
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="排产信息" name="production">
          <!-- 排产信息表格 - 没有批量下载按钮 -->
          <el-table :data="productionList" style="width: 100%" border>
            <el-table-column prop="productionNo" label="生产加工单号" align="left" />
            <el-table-column prop="quantity" label="排产数量" align="left" />
            <el-table-column prop="process" label="过程跟踪" align="left" />
            <el-table-column prop="isOutStock" label="是否出库" align="left" />
            <el-table-column prop="startTime" label="开始时间" align="left" />
            <el-table-column prop="endTime" label="完成时间" align="left" />
            <el-table-column label="操作" align="left">
              <template #default="scope">
                <el-button text @click="viewProduct(scope.row)" style="color: #409eff"
                  >查看对应产品</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页组件 -->
          <el-pagination
            style="margin-top: 20px; justify-content: flex-end"
            v-model:current-page="query.pageNum"
            v-model:page-size="query.pageSize"
            :page-sizes="[10, 20, 30, 50]"
            :total="productionList.length"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-tab-pane>
        <el-tab-pane label="产品信息" name="product">
          <!-- 批量下载按钮 -->
          <div class="tab-header-actions">
            <el-button
              @click="batchDownloadProductTags"
              :disabled="!canDownloadProducts"
              type="primary"
              >批量下载标签</el-button
            >
          </div>
          <!-- 产品信息表格 -->
          <el-table
            :data="productList"
            style="width: 100%"
            border
            @selection-change="selectedProducts = $event"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column prop="productNo" label="产品编号" align="left" />
            <el-table-column prop="productionNo" label="生产加工单" align="left" />
            <el-table-column prop="status" label="当前状态" align="left" />
            <el-table-column prop="scheduleTime" label="排产时间" align="left" />
            <el-table-column prop="stockInTime" label="入库时间" align="left" />
            <el-table-column prop="stockOutTime" label="出库时间" align="left" />
            <el-table-column label="操作" align="left">
              <template #default="scope">
                <el-button
                  text
                  @click="viewParams(scope.row)"
                  style="color: #409eff; margin-right: 10px"
                  >查看参数</el-button
                >
                <el-button text @click="viewTags(scope.row)" style="color: #409eff"
                  >查看标签</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页组件 -->
          <el-pagination
            style="margin-top: 20px; justify-content: flex-end"
            v-model:current-page="query.pageNum"
            v-model:page-size="query.pageSize"
            :page-sizes="[10, 20, 30, 50]"
            :total="productList.length"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 审批流程弹窗组件 -->
    <approval-time-dot
      v-model:visible="showApprovalDialog"
      :approval-steps="approvalSteps"
      @close="handleApprovalDialogClose"
    />
  </div>
</template>

<script setup name="contractDetail">
import { ref, reactive, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import ApprovalTimeDot from './approvalTimeDot.vue'
import { getContractDetail } from '@/api/business/contract'

const router = useRouter()
const route = useRoute()

// 合同信息数据
const contractInfo = reactive({
  contractName: '',
  contractNo: '',
  deId: '',
  dname: '',
  statusText: '',
  customerName: '',
  contractAmount: '',
  salesPerson: '',
  deliveryAddress: '',
  deliveryDate: '',
  acceptanceDate: '',
  signingDate: '',
  contactPerson: '',
  contactPhone: '',
  attachment: '',
  approvalStatus: '',
  remark: ''
})

// 详情数据
const detailData = ref(null)
const loading = ref(false)

// 选项卡状态
const activeTab = ref('contract')
// 参数配置状态
const activeConfig = ref('technical')

// 分页相关
const query = reactive({
  pageNum: 1,
  pageSize: 10,
  keyword: ''
})

// 排产信息数据
const productionList = ref([])

// 产品信息数据
const productList = ref([])

// 合同信息数据列表
const contractDataList = ref([])

// 选中的排产信息
const selectedProduction = ref([])
// 选中的产品信息
const selectedProducts = ref([])

// 计算属性：判断是否可以下载
const canDownloadProduction = computed(() => selectedProduction.value.length > 0)
const canDownloadProducts = computed(() => selectedProducts.value.length > 0)

// 处理分页大小变化
function handleSizeChange(val) {
  query.pageSize = val
  query.pageNum = 1
  // 在实际应用中，这里应该调用获取数据的方法
}

// 处理分页当前页变化
const handleCurrentChange = (val) => {
  query.pageNum = val
  // 在实际应用中，这里应该调用获取数据的方法
}

// 查看对应产品
const viewProduct = (row) => {
  ElMessage.info(`查看产品: ${row.productionNo}`)
}

// 查看参数
const viewParams = (row) => {
  ElMessage.info(`查看参数: ${row.productNo}`)
}

// 查看标签
const viewTags = (row) => {
  ElMessage.info(`查看标签: ${row.productNo}`)
}

// 批量下载排产标签
const batchDownloadProductionTags = () => {
  ElMessage.success(`成功下载 ${selectedProduction.value.length} 个排产标签`)
}

// 批量下载产品标签
const batchDownloadProductTags = () => {
  ElMessage.success(`成功下载 ${selectedProducts.value.length} 个产品标签`)
}

// 技术参数列表
const technicalParamsList = [
  {
    field1: '参数1',
    field2: '参数1',
    field3: '参数1',
    unitPrice: '参数1',
    quantity: '参数1',
    amount: '参数1',
    field4: '参数1'
  },
  {
    field1: '参数2',
    field2: '参数2',
    field3: '参数2',
    unitPrice: '参数2',
    quantity: '参数2',
    amount: '参数2',
    field4: '参数2'
  },
  {
    field1: '参数3',
    field2: '参数3',
    field3: '参数3',
    unitPrice: '参数3',
    quantity: '参数3',
    amount: '参数3',
    field4: '参数3'
  },
  {
    field1: '参数4',
    field2: '参数4',
    field3: '参数4',
    unitPrice: '参数4',
    quantity: '参数4',
    amount: '参数4',
    field4: '参数4'
  },
  {
    field1: '参数5',
    field2: '参数5',
    field3: '参数5',
    unitPrice: '参数5',
    quantity: '参数5',
    amount: '参数5',
    field4: '参数5'
  },
  {
    field1: '参数6',
    field2: '参数6',
    field3: '参数6',
    unitPrice: '参数6',
    quantity: '参数6',
    amount: '参数6',
    field4: '参数6'
  },
  {
    field1: '参数7',
    field2: '参数7',
    field3: '参数7',
    unitPrice: '参数7',
    quantity: '参数7',
    amount: '参数7',
    field4: '参数7'
  }
]

// 加载合同详情
const loadContractDetail = async () => {
  const coId = route.query.coId || ''
  const deId = route.query.deId || ''
  if (!coId || !deId) {
    ElMessage.error('缺少必要参数：合同编号或需求id')
    return
  }
  loading.value = true
  try {
    const res = await getContractDetail({
      coId,
      deId
    })
    console.log(res)
  } catch (error) {
    console.error('加载合同详情失败:', error)
  } finally {
    loading.value = false
  }
}

// 返回上一页
const handleBack = () => {
  router.back()
}

// 页面加载时获取详情
onMounted(() => {
  loadContractDetail()
})
const showAttachment = () => {
  window.open(contractInfo.attachment, '_blank')
}

// 跳转需求详情
const towardRequirement = () => {
  router.push({
    path: '/business/requirement/requirementDetail'
  })
}

// 审批流程弹窗状态
const showApprovalDialog = ref(false)

// 审批流程数据
const approvalSteps = ref([
  {
    user: '张三(zhangsan)',
    status: '已同意',
    comment: '同意',
    time: '2025-03-29 16:46:03'
  },
  {
    user: '李四(lisi)',
    status: '待审批',
    comment: '待审批',
    time: ''
  },
  {
    user: '王五(wangwu)',
    status: '待审批',
    comment: '待审批',
    time: ''
  }
])

// 查看审批状态
const showApprovalStatus = () => {
  showApprovalDialog.value = true
}

// 处理审批弹窗关闭
const handleApprovalDialogClose = () => {
  showApprovalDialog.value = false
}
</script>
<style scoped>
.contract-detail-container {
  background: #fff;
  padding: 20px;
  min-height: 100vh;
}

/* 上方展示信息区域样式 */
.header-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 20px;
  border-bottom: 1px solid #e8e8e8;
}

.info-left {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

/* 合同名称容器 */
.contract-name-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.contract-name-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.contract-name-value {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

/* 额外信息区域 */
.additional-info {
  display: flex;
  align-items: flex-start;
  gap: 0;
  flex-wrap: wrap;
}

.info-left .contract-no,
.info-left .customer-name,
.info-left .delivery-date,
.info-left .contact-person,
.info-left .requirement-no,
.info-left .contract-amount,
.info-left .acceptance-date,
.info-left .contact-phone {
  font-size: 14px;
  color: #606266;
  margin-right: 80px;
  min-width: 180px;
  line-height: 1.5;
}

.info-left .requirement-name,
.info-left .sales-person,
.info-left .signing-date,
.info-left .attachment,
.info-left .status,
.info-left .delivery-address,
.info-left .approval-status {
  font-size: 14px;
  color: #606266;
  min-width: 250px;
  line-height: 1.5;
}

/* 备注特殊处理 */
.remark-title {
  font-size: 14px;
  color: #606266;
  margin-right: 8px;
  min-width: 40px;
}

.remark-content {
  font-size: 14px;
  color: #303133;
  flex: 1;
  line-height: 1.6;
  word-break: break-all;
  max-width: calc(100% - 50px);
}

.info-right {
  display: flex;
  align-items: flex-start;
}

.link-text {
  color: #409eff;
  cursor: pointer;
}

.link-text:hover {
  text-decoration: underline;
}

.status-text {
  color: #67c23a;
}

.approval-icon {
  color: #67c23a;
  margin-left: 5px;
}

.attachment-info {
  display: flex;
  align-items: center;
  color: #606266;
}

.file-count {
  background: #f56c6c;
  color: white;
  padding: 2px 8px;
  border-radius: 10px;
  margin-right: 8px;
  font-size: 12px;
}

.file-hint {
  font-size: 12px;
  color: #909399;
}

/* 选项卡样式 */

/* 下方左右布局区域样式 */
.main-content-container {
  display: flex;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  overflow: hidden;
  height: 600px;
}

/* 左侧选项卡样式 */
.left-sidebar {
  width: 200px;
  background-color: #f5f7fa;
  padding: 25px 20px 20px 20px;
  display: flex;
  flex-direction: column;
}

.config-title {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-top: 0;
}

.tab-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tab-item {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.tab-item.active {
  background-color: #2457d7;
  color: #fff;
}

.tab-item .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 10px;
}

.tab-item:not(.active) .dot {
  background-color: #409eff;
}

.tab-item.active .dot {
  background-color: #ccc;
}

.tab-text {
  font-size: 14px;
}

/* 中间分割线样式 */
.divider {
  width: 1px;
  background-color: #e8e8e8;
  height: 100%;
}

/* 右侧内容区域样式 */
.right-content {
  flex: 1;
  background-color: #fff;
  padding: 20px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 右侧头部样式 */
.right-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e8e8e8;
}

.content-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin: 0;
}

.content-area {
  flex: 1;
  overflow-y: auto;
}

/* 技术参数内容样式 */
.technical-content {
  width: 100%;
}

.technical-grid {
  width: 100%;
  /* border: 1px solid #e8e8e8; */
  border-radius: 4px;
  overflow: hidden;
}

/* 业务参数内容样式 */
.business-content {
  width: 100%;
}

.business-item {
  display: flex;
  margin-bottom: 20px;
}

.business-label {
  width: 80px;
  font-weight: 500;
  color: #606266;
  text-align: left;
  margin-right: 10px;
  font-size: 16px;
}

.business-value {
  flex: 1;
  color: #303133;
  font-size: 16px;
}

.customer-requirements {
  word-wrap: break-word;
  word-break: break-all;
  line-height: 1.5;
}
.tab-header-actions {
  margin-bottom: 20px;
}

@media (max-width: 1200px) {
  .info-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 992px) {
  .info-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .params-container {
    flex-direction: column;
  }

  .left-sidebar {
    width: 100%;
    margin-right: 0;
    margin-bottom: 20px;
  }
}

@media (max-width: 768px) {
  .info-grid {
    grid-template-columns: 1fr;
  }

  .technical-summary {
    flex-direction: column;
    gap: 10px;
  }

  .pagination {
    flex-direction: column;
    gap: 10px;
  }
}
</style>
